<template>
  <section class="wp-right">
    <RightCheck :listInfo="{list:allRightList,defaultChecked:positionRightList}" :positionInfo="positionInfo" @save="saveRight"/>
  </section>
</template>

<script>
import system from '@/api/system'
import position from '@/api/system/positionAPI'
import RightCheck from './components/RightCheck'
export default {
  name: 'RightInfo',
  props: ['data'],
  watch: {
    data: {
      handler (val) {
        this.positionInfo = {...val}
      },
      deep: true,
      immediate: true
    }
  },
  components: {RightCheck},
  data () {
    return {
      positionInfo: {},
      allRightList: [],
      positionRightList: []
    }
  },
  mounted () {
    this.getRightList().then(res => {
      if (this.positionInfo && this.positionInfo.positionCode) {
        this.getPositionRightList(this.positionInfo.positionCode)
      }
    })
  },
  methods: {
    saveRight (data) {
      position.savePositionRightAPI(data).then(res => {
        this.$msgBox.success('保存成功')
      })
    },
    getRightList () {
      return new Promise((resolve, reject) => {
        system.getMenuListAPI({deep: true, hidden: 1}).then(res => {
          this.allRightList = res.data || []
          resolve(res)
        })
      })
    },
    getPositionRightList (positionCode) {
      position.getPositionMenuListAPI(positionCode).then(res => {
        if (res.data && res.data.length > 0) {
          this.positionRightList = res.data.map(v => {
            return v.menuCode
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.wp-right{
    max-height: 400px;
    overflow: auto;
}
.right-all{
    padding: 0 10px;
}
.flex-row{
    display: flex;
    width: 100%;
    overflow:hidden;
    padding: 10px 0px;
    flex-wrap:wrap;
    .right-item{
        width:calc(25% - 30px);
        margin-right:10px;
        margin-left:10px;
        margin-bottom: 10px;
        &:nth-child(4) {
         margin-right:0;
       }
    }
}
</style>
